<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- @wx接口群:幻影 -->
    <div id="root">
      <p>{{ count }}</p>
      <button @click="plus">plus</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.global.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script> -->
    <script>
      console.log(Vue);
      console.log(Vue.createApp());
      let root = document.getElementById("root");
      let { reactive, toRefs } = Vue;
      const RootConfig = {
        data() {
          return {
            count: 12312312,
          };
        },
        methods: {
          plus() {
            this.count++;
          },
        },
        // setup() {
        //   let state = reactive({ count: 0 });
        //   let plus = () => {
        //     state.count++;
        //   };
        //   return { ...toRefs(state), plus };
        // },
      };
      Vue.createApp(RootConfig).mount("#root");

      // let vm = new Vue({
      //   el: "#root",
      //   data: {
      //     count: 0,
      //   },
      //   methods: {
      //     plus() {
      //       this.count++;
      //     },
      //   },
      // });
      // console.log(vm);
    </script>
  </body>
</html>
